<template>
  <div>
    <NavBar>
      购物车
    </NavBar>
    <div class="goodsList">
      <van-checkbox-group ref="checkboxGroup" v-model="result">
        <van-swipe-cell :right-width="50" v-for="item in cartList.list" :key="item.id">
          <div style="float:left" class="checkbox">
            <van-checkbox :name="item.id" @click.prevent="changeCheck" />
          </div>
          <div style="float:left">
            <van-card :num="item.goods.stock" :price="item.goods.price" :title="item.goods.title" class="goods-card"
              :thumb="item.goods.cover_url" style="float: left" />
          </div>
          <van-stepper :min="1" :max="10" integer step="1" style="float: left;line-height: 103px" :model-value="item.num"
            :name="item.id" async-change @change="onChange" />
          <template #right>
            <van-button square type="danger" text="删除" class="btn" @click="deleteCartItem(item.id)" />
          </template>
        </van-swipe-cell>
        <div class="end-cart">
          <div style="float:left;" class="checkbox2">
            <van-checkbox v-model:checked="all" @click="allCheck" />
          </div>
          <div style="float: left">
            <span style="float:left;line-height: 44px;margin-left:15px">全选</span>
            <div style="float: right;width: 280px;display: inline-block;text-align: right;line-height: 44px">
              <span>合计</span>
              <span style="color: red">￥{{ getPrice }}.00</span>
              <van-button round type="danger" @click.stop="onsubmit"
                style="margin-left: 10px;position:relative;bottom:6px;padding:0 30px">结算</van-button>
            </div>
          </div>
        </div>
      </van-checkbox-group>
    </div>
  </div>
</template>

<script>
import NavBar from "@/components/common/navbar";
import { Toast } from 'vant'
import { getCart } from '@/api/cart/index'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import { onMounted, reactive, toRefs, getCurrentInstance, computed, ref } from 'vue'
export default {
  name: "shopCart",
  components: { NavBar },
  setup() {
    let cartList = reactive({
      list: []
    })
    const store = useStore()
    const router = useRouter()
    let all = ref(true)
    const { proxy } = getCurrentInstance()
    const goods = reactive({
      value: 0,
      num: 0,
      result: []
    })
    const onsubmit = () => {
      if (goods.result.length == 0) {
        Toast.fail('请选择你的商品进行结算')
      } else {
        router.push('/createOrder')
      }
    }
    const changeCheck = async () => {
      await proxy.$API.cart.checkedCart({ cart_ids: goods.result }).then(res => {
      })
      await init()
    }
    const onChange = (value, detail) => {
      proxy.$API.cart.modifyCart(detail.name, { num: value }).then(res => {
        cartList.list.forEach(item => {//更新list里面的值
          if (item.id == detail.name) {
            item.num = value
          }
        })
      })
    }
    const getPrice = computed(() => {
      return cartList.list.reduce((pre, current) => {
        if (current.is_checked === 1) {
          return pre + current.goods.price * current.num
        } else {
          return pre
        }
      }, 0)
    })
    const deleteCartItem = async id => {
      await proxy.$API.cart.deleteCartItem(id).then(res => {
      })
      await init()
      await store.dispatch('updateCart')
    }
    const allCheck = () => {
      if (!all.value) {
        goods.result = cartList.list.map(item => item.id)
      } else {
        goods.result = []
      }
      changeCheck()
      all.value = !all.value
    }
    const init = async () => {
      await getCart('include=goods').then(res => {
        cartList.list = res.data
        goods.result = res.data.filter(item => item.is_checked === 1).map(item2 => item2.id)
      })
      all.value = (cartList.list.length == goods.result.length) && (cartList.list.length != 0) ? true : false
    }
    onMounted(() => {
      init()
    })
    return {
      cartList,
      ...toRefs(goods),
      changeCheck,
      onChange,
      getPrice,
      all,
      allCheck,
      deleteCartItem,
      onsubmit
    }
  }
}
</script>

<style scoped>
.goodsList {
  margin-top: 45px;
}

.btn {
  padding: 25px 15px;
}

::v-deep .van-swipe-cell {
  line-height: 103px;
}

::v-deep .van-card {
  width: 230px;
  text-align: center;
  background-color: white;
}

::v-deep .van-card__num {
  position: relative;
  left: 90px;
  top: -65px
}

.end-cart {
  position: fixed;
  bottom: 50px;
  left: 0;
  right: 0;
  border-top: 1px solid red;
  height: 46px;
}

.checkbox {
  height: 30px;
  width: 30px;
  position: relative;
  top: 40px;
  left: 10px;
}

.checkbox2 {
  position: relative;
  top: 10px;
  left: 10px;
}</style>
